<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>Dynatree - Example</title>

	<script src='../jquery/jquery.js' type='text/javascript'></script>
	<script src='../jquery/ui.core.js' type='text/javascript'></script>
    <script src='../jquery/jquery.cookie.js' type='text/javascript'></script>

	<link href='../src/skin/ui.dynatree.css' rel='stylesheet' type='text/css'>
	<script src='../src/jquery.dynatree.js' type='text/javascript'></script>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<link href="prettify.css" rel="stylesheet">
	<script src="prettify.js" type='text/javascript'></script>
	<link href='sample.css' rel='stylesheet' type='text/css'>
    <script src='sample.js' type='text/javascript'></script>
	<!-- End_Exclude -->
    
<script type='text/javascript'>
    function drawCanvas() {
        var canvas = document.getElementById("canvas1");
        if(canvas && canvas.getContext) {
            canvas = canvas.getContext("2d");
            var lingrad = canvas.createLinearGradient( 0, 0, 0, 150 );  
            lingrad.addColorStop( 0, "#0099cc" );  
            lingrad.addColorStop( 0.5, "#fff" );  
            lingrad.addColorStop( 0.5, "#99cc00");  
            lingrad.addColorStop( 1, "#0099ff");  
            canvas.fillStyle = lingrad;  
            canvas.fillRect(0, 0, 400 ,100 );              
            canvas.fillStyle = "rgb(200,0,0)";
            canvas.fillRect( 10, 10, 55, 55 );
        }  
    }  

	$(function(){
		// Initialize the tree inside the <div>element.
		// The tree structure is read from the contained <ul> tag.
		$("#tree").dynatree({
			onActivate: function(dtnode) {
				$("#echoActive").text(dtnode.data.title);
			},
			onDeactivate: function(dtnode) {
				$("#echoSelected").text("-");
			}
		});

		$("#btnAddObject").click(function(){
			// Sample: add an hierarchic branch using an array
			var obj = [
				{ title: 'Folder node 3', isFolder: true,
					children: [
						{ title: 'node 3.1 line1\nline2' },
						{ title: '<h2>node 3.2</h2>',
							children: [
								{ title: 'node 3.2.1' },
								{ title: 'node 3.2.2',
									children: [
										{ title: 'node 3.2.2.1' }
									]
								}
							]
						}
					]
				}
			];
			$("#tree").dynatree("getRoot").addChild(obj);
		});
        
        drawCanvas();
	});
</script>
</head>

<body class="example">
	<h1>Example: formatted and multi-line titles</h1>
	<p class="description">
		This example shows how multi-line and non-text contents is displayed. 
	</p>
	
	<div id="tree">
		<ul>
			<li>Using some <b>bold</b> markup in the text (&lt;li&gt; tag only).
			<li><span>Using some <b>bold</b> markup in the text (&lt;li&gt;&lt;span&gt; tag).</span>

			<li class="folder">Long paragraph, with H3, P, and BR
				<ul>
					<li><span><h3>Title</h3>
                    <p>
                    Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed 
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
                    <br>
                    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
                    amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
                    sed diam voluptua. 
                    <br>
                    At vero eos et accusam et justo duo dolores et ea rebum. 
                    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
                    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
                    At vero eos et accusam et justo duo dolores et ea rebum. 
                    <br>
                    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
					</span>
				</ul>

			<li class="folder">Long line
				<ul>
					<li><span>
                    Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed 
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
                    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
                    amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
                    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
                    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
                    At vero eos et accusam et justo duo dolores et ea rebum. 
                    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </span>
				</ul>

			<li class="folder">Long text using BR and P
				<ul>
					<li><span>
                    <p>
                    Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed <br>
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,  <br>
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br>
                    </p>
                    <p>
                    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit  <br>
                    amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam  <br>
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,  <br>
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br>
                    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <br>
                    </p>
                    <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod  <br>
                    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  <br>
                    At vero eos et accusam et justo duo dolores et ea rebum.  <br>
                    </p>
                    <p>
                    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <br>
                    </p>
                    </span>
				</ul>

			<li class="folder">Form elements
				<ul>
					<li><span>
						Click here: <button value="123">Click me</button>
						</span>
					<li data="icon: false"><span>
                        <input type="radio" name="rb1" value="v1" checked> Umschlag 1<br>
                        <input type="radio" name="rb1" value="v2"> Umschlag 2<br>
                        <input type="radio" name="rb1" value="v3"> Umschlag 3
                        </span>
				</ul>

            <li class="folder">Canvas
				<ul>
					<li data="icon: false"><span>
						<canvas id="canvas1" width="400" height="100">
						Your browser does not support the <code>canvas</code> element.
						</canvas> 
						</span>
				</ul>

			<li class="folder">Video
				<ul>
                    <li><span>
                        <video autoplay>
                          <source src="foo.ogg" type="video/ogg">
                          <source src="foo.mov">
                          Your browser does not support the <code>video</code> element.
                        </video>
                    	</span>
				</ul>

			<li class="folder">Audio
				<ul>
                    <li><span>
                        <audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"
                               autoplay>
                          Your browser does not support the <code>audio</code> element.
                        </audio>
                    </span>
				</ul>

			<li>item3
		</ul>
	</div>

	<div>Active node: <span id="echoActive">-</span></div>
	<p>
		<button id="btnAddObject">Add nodes using arrays</button>
	</p>
	<!-- Start_Exclude: This block is not part of the sample code -->
	<hr>
	<p class="sample-links  no_code">
		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
		<a class="hideOutsideFS" href="#">Link to this page</a>
		<a class="hideInsideFS" href="samples.html">Example Browser</a>
		<a href="#" class="codeExample">View source code</a>
	</p>
	<!-- End_Exclude -->
</body>
</html>
